{% load forum_tags %}
{% load static %}

<script type="text/javascript" src="{% static 'inplace_pagedown.js' %}{% randparam %}"></script>


<div class="ui basic form-wrap segment fit" id="inplace">

    <form class="ui compact form" id="form">
        {# Create a new comment #}
        {% if new %}
            <div class="field">
                {% include 'widgets/textarea.html' with rows=7 %}
            </div>

        {% else %}

            {% if post.is_toplevel %}
                <div class="fields">
                    {# Edit the type #}
                    <div class="type field">
                        {% inplace_type_field post=post %}
                    </div>
                    {# Edit the title #}
                    <div class="title field"><textarea id="title" rows="1" cols="8">{{ post.title }}</textarea></div>
                </div>
            {% endif %}

            {# Edit the content #}
            <div class="field">
                {% if post.is_toplevel %}
                    {% include 'widgets/post_message.html' %}
                {% endif %}
                {% include 'widgets/textarea.html' %}
            </div>
            {# Edit the tags #}
            {% if post.is_toplevel %}
             {% block tags_field %}
                <div class="required field">
                    {{ form.tag_val }}
                    <p class="muted">{{ form.tag_val.help_text }}</p>
                </div>
              {% endblock %}
            {% endif %}

        {% endif %}


        <p class="muted">Tips: CTRL+ENTER to submit the form. ESC to cancel. Markdown accepted.</p>

        {# Preview segment #}
        <div class="ui preview segment">{{ html |safe }}</div>

        {# Submit and cancel buttons #}
        <div class="field">
            <a class="ui green button {% if new %}create{% else %}save{% endif %}">
                <i class="check icon"></i>Save
            </a>

            <a class="ui button cancel">
                <i class="x icon"></i>Cancel
            </a>


            {% if post and not new %}
                <a class="ui right floated button delete">
                    <i class="trash icon"></i>Delete
                </a>
            {% endif %}
        </div>

    </form>

</div>


<script>
    $(document).ready(function () {

        $('.ui.dropdown').dropdown();
        drag_and_drop();
        $('form .preview').each(function () {
            var text = $(this).closest('form').find('.wmd-input').val();
            var form = $(this).closest('form');
            highligh_preview(form, text);
        });
        // initialize autocomplete
        autocomplete_users();

        $(this).on('click', '#inplace .cancel', function () {
            cancel_inplace()
        });
        $(this).on('click', '#inplace .delete', function () {
            var post = $(this).closest('.post');
            delete_post(post)
        });
        $(this).on('keyup', 'body', function (event) {
            if (event.keyCode === 27) {
                cancel_inplace()
            }
        });
        $('#inplace #wmd-input').keyup(function (event) {

            // Submit form with CTRL-ENTER
            if (event.ctrlKey && (event.keyCode === 13 || event.keyCode === 10)) {
                var save = $('#inplace').find('.save, .create');
                save.click();
            }
        });

        $(this).on('keyup keypress', '#inplace #tag_val', function () {

            // Submit form when pressing enter on tags field.
            if (event.keyCode === 13 || event.keyCode === 10) {
                event.preventDefault();
                var save = $('#inplace').find('.save, .create');
                save.click();
            }
        });

        $("body").on("click", '.pagedown-image-upload.show .submit-input', function () {

            var form = $(this).closest('form');
            setTimeout(
                function () {
                    var text = form.find('.wmd-input').val();
                    highligh_preview(form, text);
                }, 500);
        });

        $("#wmd-button-bar").click(function (event) {
            var text = $(this).closest('form').find('.wmd-input').val();
            var form = $(this).closest('form');
            highligh_preview(form, text);

        });
        tags_dropdown();
    })
</script>
